<template>
  <div class="dizhi">
    <van-nav-bar
      title="订单地址页面"
      left-text="返回"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <!-- 地址管理 -->
    <div class="asyyds">
      <ul>
        <li v-for="item in list" :key="item.id">
          <div class="a">
            {{ item.name }}
          </div>
          <div class="b">
            <div class="mode">{{ item.address }}{{ item.address_detail }}</div>
            <div class="dizhi">
              {{ item.mobile }}
            </div>
          </div>
          <div class="c" @click="$router.push(`/bianxiedizhi?id=${item.id}`)">
            <img src="../../../assets/images/edit.png" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <!-- 新建地址 -->
    <div class="bsyyds">
      <van-button @click="tianjia" class="xinjian" type="primary" block
        >+ 新建地址</van-button
      >
    </div>
  </div>
</template>

<script>
import { getListAction, saveAction } from "@/api/地址接口/dizhi.js";
export default {
  name: "Dizhi",
  data() {
    return {
      list: [],
    };
  },
  methods: {
    tianjia() {
      this.$router.push("/bianxiedizhi");
    },
  },
  created() {
    getListAction({
      params: {
        openId: localStorage.getItem("openId"),
      },
    }).then((res) => {
      console.log(res);
      this.list = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.dizhi {
  .asyyds {
    margin-top: 50px;
    ul {
      list-style: none;
      padding: 0 10px;
      li {
        width: 100%;
        height: 66px;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
        .a {
          flex: 1;
        }
        .b {
          flex: 3;
        }
        .c {
          flex: 1;
          text-align: center;
          img {
            width: 25px;
            height: 25px;
          }
        }
      }
    }
  }
  // 新建地址
  .bsyyds {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 5px 5%;
    box-sizing: border-box;
    .xinjian {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      color: red;
      background-color: #fff;
      border-color: red;
    }
  }
}
</style>